<template>
  <div>
   
    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true">
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入角色名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="queryLike"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="昵称"
          clearable
          style="width: 240px"
          @keyup.enter.native="queryLike"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="queryLike">搜索</el-button>
        <el-button @click="resetQuery()">重置</el-button>
       <span v-hasPermissions="'system:user'">  <el-button @click="addDioalog = true" type="primary">新增</el-button> </span>
      </el-form-item>
    </el-form>
    <!-- 新增用户 -->
    <el-dialog v-model="addDioalog" title="新增用户" width="30%" align-center>
      <el-form
        :model="ruleForm"
        ref="ruleFormRef"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userName">
          <el-input v-model="ruleForm.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="ruleForm.nickName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormAdd(ruleForm)"
            >Submit</el-button
          >
          <el-button @click="resetForm()">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog v-model="editDioalog" title="编辑用户" width="30%" align-center>
      <el-form
        :model="editForm"
        ref="editFormRef"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userName">
          <el-input v-model="editForm.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="editForm.nickName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitEditForm(editForm)"
            >确认修改</el-button
          >
          <el-button @click="canceEditForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 用户表 -->
    <el-table :data="tableData" border>
      <el-table-column
        prop="userName"
        fixed="left"
        label="用户账号"
        width="120"
      />
      <el-table-column prop="nickName" label="用户昵称" width="120" />
      <el-table-column prop="email" label="用户邮箱" width="120" />
      <el-table-column prop="phonenumber" label="手机号码" width="120" />
      <el-table-column
        prop="sex"
        label="用户性别（0男 1女 2未知）"
        width="120"
      >
      <template  #default="scope">
                <span v-if="scope.row.sex == 0">男</span>
                <span  v-else-if="scope.row.sex == 1">女</span>
            </template></el-table-column>
      <el-table-column prop="avatar" label="头像地址" width="120" />
      <el-table-column
        prop="status"
        label="帐号状态（0正常 1停用）"
        width="120"
      >
       <template  #default="scope">
                <span v-if="scope.row.status == 0">正常</span>
                <span  v-else-if="scope.row.status == 1">停用</span>
            </template>

      </el-table-column>
            
      <el-table-column
        prop="delFlag"
        label="删除标志（0代表存在 2代表删除）"
        width="120"
        row-key="userName"
      >
      <template  #default="scope">
                <span v-if="scope.row.delFlag == 0">存在</span>
                <span  v-else-if="scope.row.delFlag == 2">删除</span>
            </template></el-table-column>
      <el-table-column prop="loginIp" label="最后登录IP" width="120" />
      <el-table-column prop="roleId" label="角色" width="120" />
      <el-table-column prop="loginDate" label="最后登录时间" width="120" />
      <el-table-column prop="createBy" label="创建者" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="120" />
      <el-table-column prop="updateBy" label="更新者" width="120" />
      <el-table-column prop="updateTime" label="更新时间" width="120" />
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <el-button type="text" @click="edit(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-popconfirm title="删除?" @confirm="del(scope.$index, scope.row)">
            <template #reference>
              <el-button type="info" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-show="total > 0"
        v-model:currentPage="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[2, 5, 10, 400]"
        :small="small"
        :background="true"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @pagination="queryLike"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  addUser,
  getUserList,
  deleteUser,
  editUser,
  queryById,
} from "@/api/user";
//查询体
let queryParams = ref({
  //当前页
  pageNum: 1,
  //每页5条数据
  pageSize: 10,
  userName: "",
  nickName: "",
});
//改变当前页
let handleCurrentChange = function (number) {
  queryLike();
};

//改变每页数据量
let handleSizeChange = function (number) {
  queryLike();
};
//总数据量
let total = ref(0);

const editDioalog = ref(false);
let editForm = ref({
  userId: "",
  userName: "",
  nickName: "",
  email: "",
  password: "",
  updateBy:"",
});

const addDioalog = ref(false);
const tableData = ref([]);
//新增表单
const ruleForm = ref({
  userId: "",
  userName: "",
  nickName: "",
  email: "",
  password: "",
  createBy:"",
});
const ruleFormRef = ref();
const queryFormRef=ref();
const rules = reactive({
  userName: [{ required: true, message: "Please input name", trigger: "blur" }],
  nickName: [{ required: true, message: "Please input name", trigger: "blur" }],
  password: [{ required: true, message: "Please input name", trigger: "blur" }],
});
//模糊查询
let queryLike = function () {
  getUserList(queryParams.value).then((res) => {
    total.value = res.data.total;
    tableData.value = res.data.list;
  });
};
let resetQuery = function () {
  queryFormRef.value.resetFields();
};
//新增
let submitFormAdd = function (formData) {
  formData.createBy=sessionStorage.getItem('userName');
  addUser(formData).then(() => {
    resetForm();
    (addDioalog.value = false), queryLike();
  });
};
let resetForm = function () {
  ruleFormRef.value.resetFields();
};
let del = function (index, row) {
  deleteUser(row.userId).then((res) => {
    queryLike();
  });
};
//编辑
let edit = function (index, row) {
  queryById(row.userId).then((res) => {
    editForm.value = res.data;
  });

  editDioalog.value = true;
};
let submitEditForm = function (editForm) {
  editForm.updateBy=sessionStorage.getItem('userName');
  editUser(editForm).then((res) => {
    (editDioalog.value = false), queryLike();
  });
};
let canceEditForm = function () {
  editDioalog.value = false;
};
</script>

<style></style>
